<template>
	<view class="home">
		<scroll-view scroll-x="true" class="navScroll">
			<view class="item" :class="index==navNumber ? 'active':''" v-for="(item,index) in navArr" :key="item.id" @click="navClick(index,item.id)">{{item.classname}}</view>
		</scroll-view>
		
		<view class="content">
			<view class="row">
				<newsBox v-for="(item,index) in newsArr" :key="item.id" @click.native="goDetail(item)" :item='newsArr[index]'></newsBox>
			</view>
		</view>
		
		<view class="noData" v-if="!newsArr.length">
			<image src="../../static/images/noData.png" mode=""></image>
		</view>
		
		<view class="loading">
			<view v-if="loading==1">
				正在加载中......
			</view>
			<view v-if="loading==2">
				没有更多了~~~
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'index',
				navNumber:0,
				navArr:[],
				newsArr:[],
				// 分页
				currentPage:1,
				// 0-->默认  1-->加载中   2-->没有更多了
				loading:0
			}
		},
		
		// 往下触底触发
		onReachBottom(){
			// 判断是否满足条件再请求数据
			if(this.newsArr.length<8){
				this.loading = 2
			}else {
				this.loading = 1
				this.currentPage++
				this.getNewsDate()
			}
		},
		onLoad() {
			this.getNavData()
			this.getNewsDate()
		},
		methods: {
			// 点击导航切换
			navClick(indexId,itemId){
				this.navNumber = indexId
				// 每次切换导航栏都将请求的页码变为初始值(初始化)
				this.currentPage = 1
				// 将原有的新闻数据清空(初始化)
				this.newsArr = []
				// 初始化loading状态
				this.loading = 0
				// console.log(this.newsArr)
				// console.log(this.navNumber,itemId) 
				// 根据id确定点击的导航类别，然后请求数据
				this.getNewsDate(itemId)
				
			},
			
			// 跳转到详情页
			goDetail(evt){
				uni.navigateTo({
					url:`/pages/detail/detail?cid=${evt.classid}&id=${evt.id}`
				})
			},
			
			// 获取导航数据
			getNavData(){
				uni.request({
					url:'https://ku.qingnian8.com/dataApi/news/navlist.php',
					success: res => {
						this.navArr = res.data
					}
				})
			},
			
			// 获取新闻列表 
			getNewsDate(id=50){
				uni.request({
					url:'https://ku.qingnian8.com/dataApi/news/newslist.php',
					// 根据传过来的id来确定分类
					data:{
						cid:id,
						page:this.currentPage
					},
					success: res => {
						// 最开始的数据拼接上新请求来的数据
						this.newsArr = [...this.newsArr,...res.data]
						// console.log(this.newsArr)
						this.loading = 0
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navScroll {
		height: 100rpx;
		background-color: #F7F8FA;
		// 必须给父级加上white-space: nowrap;样式才能实现横向滚动
		white-space: nowrap;
		// 固定定位(吸顶效果)
		position: fixed;
		// 解决H5与小程序的差异化
		top:var(--window-top);
		z-index: 10;
		left: 0;
		.item {
			font-size: 40rpx;
			display: inline-block;
			text-align: center;
			line-height: 100rpx;
			padding: 0 30rpx;
			// border-right: 1px solid black;
			color: #333;
			// 高亮显示
			&.active {
				color: #31c27c;
			}
		}
	}
	
	.content {
		// 内容与边框间隔
		margin-top: 100rpx;
		padding: 40rpx;
	}
	
	.noData {
		
		image {
			height: 1150rpx;
			width: 780rpx;
		}
	}
	.loading {
		view {
			text-align: center ;
			padding: 20rpx 0;
			font-size: 30rpx;
			color: #666;
		}
	}
</style>
